<template>
	<div id="goods_detail">
		<!-- 商品详情顶部菜单 -->
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon  mui-pull-left">
				<img src="../../assets/images/left_arr_03.png" alt="">
			</a>
			<h1 class="mui-title">
				<span  >
          商品详情
				</span>
			</h1>
		</header>
		<!-- 商品主体 -->
		<div class="mui-content">
			<div class="mui-slider goods_page_slider">
				<div class="mui-slider-group">
					<!-- 商品主页 -->
					<div class="mui-slider-item goods_page">
						<GoodsInfo @join="to_join_group" :goodsInfo="goods_info"></GoodsInfo>
					</div>
				</div>
			</div>
		</div>
		<!-- 弹出规格选择层 -->

		<SelecSpecification></SelecSpecification>

		<!-- 底部操作栏 -->
		<div class="ptsp_footer">
			<!-- <div class="icon_box">
				<img src="../../assets/images/goods_detail/b1.png" alt="" />
				<div>客服</div>
			</div> -->
			<div class="icon_box shoucang" @tap="to_collect" >
        <img v-show="is_collect" src="../../assets/images/goods_detail/a2.png" alt="" />
        <img v-show="!is_collect" src="../../assets/images/goods_detail/a1.png" alt="" />
				<div>收藏</div>
			</div>
			<div class="icon_box" @tap="to_select_specification('car')">
				<img src="../../assets/images/goods_detail/c1.png" alt="" />
				<div>加入购物车</div>
			</div>

			<div class="buy_team" @tap="to_select_specification('group')" v-show="show_group_btn">
				<div>￥
					<span>{{$store.state.goods.buy_price_group}}</span>
				</div>
				<div>
					<span>{{$store.state.goods.group_people_num}}</span> 人拼团</div>
			</div>
			<div class="buy_only" @tap="to_select_specification('normal')" :style="$store.state.goods.goods_info.spell==1?'':'background: linear-gradient(to right, #1cb3fc, #1c83fc)'">
				<div>￥
					<span >{{$store.state.goods.buy_price_normal}}</span>
				</div>
				<div>立即购买</div>
			</div>
		</div>


	</div>
</template>
<script>
import GoodsDetail from "./goods/GoodsDetail";
import GoodsInfo from "./goods/GoodsInfo";
import GoodsSay from "./goods/GoodsSay";
import SelecSpecification from "./goods/SelectSpecifications";
import goods_data from "@/ajax/goods_ajax.js";
import goods_ajax from "../../ajax/goods_ajax";

// gallery.slider().gotoItem(index);//跳转到第index张图片，index从0开始；
export default {
  name: "goods_detail",
  data() {
    return {
      header_nav_index: 0,
      header_nav: [
        {
          name: "商品"
        },
        {
          name: "评价"
        },
        {
          name: "详情"
        }
      ],
      goods_info: "",
      is_collect: "",
      show_group_btn: false
    };
  },
  methods: {
    change_page(k) {
      let g = mui(".goods_page_slider");
      g.slider().gotoItem(k);
    },
    to_join_group(spell_id) {
      console.log("父元素 参加拼团-->" + spell_id);
      
      this.to_select_specification("group",spell_id);
    },
    // 获取商品收藏状态
    get_goods_collect_state() {
      let goods_info = this.$store.state.goods.goods_info;
      goods_ajax.is_collect(
        {
          goods: goods_info.goodsid,
          uid: this.$store.state.account.user_info.uid
        },
        res => {
          if (res) {
            this.is_collect = true;
          } else {
            this.is_collect = false;
          }
        }
      );
    },
    // 收藏
    to_collect() {
      let goods_info = this.$store.state.goods.goods_info;
      let status = "";
      if (this.is_collect) {
        status = 1;
      } else {
        status = 0;
      }

      goods_ajax.collect_goods(
        {
          goodsid: goods_info.goodsid,
          uid: this.$store.state.account.user_info.uid,
          status: status,
          type: 0
        },
        res => {
          if (res) {
            if (status == 1) {
              mui.toast("取消成功");
              this.is_collect = false;
            } else {
              mui.toast("收藏成功");
              this.is_collect = true;
            }
          }
        }
      );
    },
    // 打开选择规格窗口
    to_select_specification(type, spell_id) {
      if(!this.$store.state.account.user_info.uid){
        mui.toast("请先登录");
        return
      }
      this.$store.commit("change_buy_type", type);
      this.$store.commit("change_select_specification_show", true);
      this.$store.commit("change_specification", 0);
      console.log("spell_id"+spell_id)
      if (spell_id) {
        this.$store.commit("updata_group_order_spell_id", spell_id);
      }
    }
  },
  created() {
    // 拼团ID
    let sid = this.$route.query.sid;
    // 商品ID
    let goodsid = this.$route.query.goodsid;
    this.goodsid = goodsid;
    if (sid) {
      // 团购商品
      this.$store.commit("change_buy_type", "group");
      this.show_group_btn = true;
      goods_data.get_goods_info(
        {
          goodsid: this.goodsid,
          sid: sid
        },
        res => {
          console.log(res);
          this.$store.commit("updata_goods_info", res);
        }
      );
    } else {
      // 普通商品
      this.$store.commit("change_buy_type", "normal");
      goods_data.get_goods_info(
        {
          goodsid: this.goodsid
        },
        res => {
          console.log(res);
          this.$store.commit("updata_goods_info", res);
        }
      );
    }
  },
  mounted() {
    // 初始化三屏滚动
    mui(".goods_page_slider").slider({
      interval: 0 //自动轮播周期，若为0则不自动播放，默认为0；
    });

    // 监听滚屏事件，改变顶部状态
    document
      .querySelector(".goods_page_slider")
      .addEventListener("slide", event => {
        this.header_nav_index = event.detail.slideNumber;
      });

    // 初始化详情页滚屏
    mui("#goods_detail_page_scroll").scroll({
      deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    });
    // 请求当前用户是否收藏当前商品
    goods_data.is_collect(
      {
        goodsid: this.goodsid,
        uid: 15
      },
      res => {
        if (res) {
          this.is_collect = true;
        }
      }
    );
    // 获取当前店铺优惠券
    goods_data.get_discount(
      {
        uid: 15,
        bid: 123,
        youtype: 2
      },
      res => {
        console.log(res);
      }
    );
  },
  components: {
    GoodsDetail,
    GoodsInfo,
    GoodsSay,
    SelecSpecification
  }
};
</script>













<style lang="less" scoped>
@import "../../../static/pxvalue.less";
.mui-slider,
.mui-slider-group,
.mui-slider-item {
  height: 100%;
}

body,
html,
.mui-content {
  font-family: "微软雅黑";
  background-color: #ffffff;
  padding-bottom: @p300;
}

.mui-content {
  height: 100%;
  padding-bottom: 0;
}

.fr {
  float: right;
}

.mui-action-back {
  height: 44px;
  width: 44px;
  img {
    width: 100%;
  }
}

.fl {
  float: left;
}

.mui-bar {
  //   top: @p40;
  font-size: @p34;
}

.hr_20 {
  height: @p20;
  background-color: #f6f6f6;
}

.ptsp_top_stats {
  height: 22px;
  width: 100%;
  z-index: 20;
  background-color: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
}

.mui-title span {
  margin-left: @p40;
  margin-left: @p40;
  display: inline-block;
  height: 44px;
  color: #888888;
  border-bottom: 4px solid transparent;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  /* Firefox */
  -webkit-box-sizing: border-box;
  /* Safari */
}

.mui-title span.ptsp_active {
  color: #353535;
  border-bottom: 4px solid #353535;
}

.ptsp_banner {
  height: @p710; // margin-top: @p40;
  position: relative;
  .ptsp_pic_num {
    width: @p92;
    height: @p40;
    font-size: @p20;
    background-color: rgba(65, 65, 65, 0.7);
    position: absolute;
    right: @p20;
    bottom: @p20;
    z-index: 10;
    text-align: center;
    color: #ffffff;
    border-radius: @p10;
  }
  .mui-slider-group {
    height: 100%;
  }
  .mui-slider-item {
    a {
      width: 100%;
      height: 100%;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
  #slider {
    height: 100%;
    img {
      height: 100%;
    }
  }
}

.ptsp_goods_info {
  padding-left: @p28;
  padding-right: @p28;
  padding-top: @p20;
  background-color: #ffffff;
  padding-bottom: @p20;
  p {
    padding-bottom: 0 !important;
  }
  .title {
    font-size: @p28;
    color: #353535;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .info {
    width: 100%;
    img {
      width: 100%;
    }
  }
  .price {
    font-size: @p28;
    color: #888888;
    .sale_price {
      font-size: @p36;
      color: #ff0000;
      height: @p30;
    }
    .pick_num span {
      float: left;
      width: @p36;
      height: @p30;
      font-size: @p22;
      line-height: @p30;
      text-align: center;
      border: 1px solid #888888;
      border-left: none;
      border-right: none;
    }
    .pick_num span:nth-child(1) {
      border-left: 1px solid #888888;
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
    }
    .pick_num span:nth-child(2) {
      border: 1px solid #888888;
    }
    .pick_num span:nth-child(3) {
      border-right: 1px solid #888888;
      border-top-right-radius: 3px;
      border-bottom-right-radius: 3px;
    }
  }
  .price div:first-child {
    padding-top: @p10;
  }
  .ptsp_pintuanjia_icon {
    img {
      width: @p80;
      height: @p36;
    }
  }
}

.mui-scroll-wrapper {
  // top: 66px;
  height: @p600*2;
}

.ptsp_goods_info_img {
  .title {
    padding: 0 @p28;
    height: @p86;
    line-height: @p86;
    font-size: @p24;
    text-align: center;
    border-bottom: 1px solid #ededed;
  }
}

.ptsp_say {
  .title {
    padding: 0 @p28;
    height: @p86;
    line-height: @p86;
    font-size: @p24;
    text-align: center;
    border-bottom: 1px solid #ededed;
  }
  .user_say {
    padding: @p28; //      background-color: #ccc;
    font-size: @p22;
    color: #353535;
    line-height: @p48;
    overflow: hidden;
    .user_img {
      width: @p48;
      height: @p48;
      border-radius: 50%;
      float: left;
    }
    .user_msg {
      float: left;
      margin-left: @p20;
      .img_list {
        width: 100%;
        margin-top: @p15;
        img {
          width: @p264;
          height: auto;
        }
      }
    }
  }
  .user_say div:first-child {
    height: @p48;
    span {
      line-height: @p50;
      float: left;
      margin-left: @p20;
    }
  }
}

.ptsp_users {
  background-color: #ffffff;
  .title {
    padding: 0 @p28;
    height: @p65;
    line-height: @p65;
    font-size: @p24;
    border-bottom: 1px solid #ededed;
  }
  .user_info {
    height: @p100;
    background-color: #ffffff;
    padding: 0 @p28;
    img {
      margin-top: @p15;
      display: block;
      width: @p70;
      height: @p70;
      border-radius: 50%;
    }
    .to_join {
      width: @p120;
      height: @p70;
      margin-top: @p15; // background-image: url(../../images/ptsp/btn_bg_03.png);
      background-size: 100% 100%;
      line-height: @p70;
      text-align: center;
      font-size: @p24;
      color: #ffffff;
    }
    .time {
      text-align: right;
      margin-top: @p20;
      padding-right: @p20;
      font-size: @p24;
      color: #888888;
      line-height: @p30;
    }
    .time span:first-child {
      color: #1c83fc;
    }
    .user_name {
      margin-left: @p30;
      font-size: @p24;
      line-height: @p100;
      color: #353535;
    }
  }
}

.ptsp_footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: @p120;
  background-color: #ffffff;
  box-shadow: 0 0 10px #aaa;
  z-index: 100;
  .icon_box {
    float: left;
    width: @p150;
    text-align: center;
    padding-top: @p15;
    img {
      width: @p50;
    }
    div {
      font-size: @p20;
      line-height: @p24;
      color: #888888;
    }
  }
  .shoucang {
    width: @p110;
  }
  .buy_only,
  .buy_team {
    width: @p200;
    height: 100%;
    background: linear-gradient(to right, #77d3fd, #77b6fd);
    float: right;
    color: #ffffff;
    font-size: @p28;
    text-align: center;
    padding-top: @p15;
  }
  .buy_team {
    background: linear-gradient(to right, #1cb3fc, #1c83fc);
  }
}

.ptsp_share {
  width: @p88;
  height: @p88;
  border-radius: 50%;
  background-color: #ffffff;
  position: fixed;
  box-shadow: 0 0 3px #ccc;
  right: @p20;
  bottom: @p130;
  text-align: center;
  font-size: @p22;
  z-index: 100;
  color: #1caafc;
  line-height: @p22;
  img {
    width: @p50;
  }
}

.ptsp_confirm_goods {
  position: fixed;
  left: 0;
  bottom: 0;
  height: auto;
  width: 100%;
  z-index: 1000;
  .ptsp_confirm_goods_info {
    width: 100%;
    padding-left: @p28;
    background-color: #ffffff;
    i {
      position: absolute;
      top: @p32;
      right: @p26;
      font-size: @p70;
    }
    .goods_img {
      width: @p256;
      height: @p256;
      display: inline-block;
      border: 2px solid #ffffff;
      position: relative;
      top: -@p36;
      img {
        width: 100%;
        display: inline-block;
        vertical-align: middle;
      }
    }
    .price {
      display: inline-block;
      width: @p320;
      margin-left: @p28;
      position: relative;
      top: @p20;
      font-size: @p22;
      .sale_price {
        font-size: @p36;
      }
      span {
        span {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    .sel_color {
      width: 100%;
      .color_items {
        overflow: hidden;
        width: 100%;
        .item {
          float: left;
          width: @p285;
          height: @p70;
          line-height: @p70;
          text-align: center;
          font-size: @p24;
          border: 1px solid #353535;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-right: @p56;
          margin-bottom: @p35;
          border-radius: @p8;
        }
        .active {
          border: 1px solid #1c83fc;
          color: #1c83fc;
        }
      }
    }
    .sel_num {
      width: 100%;
      .num_btns {
        width: 100%;
        overflow: hidden;
        .cut,
        .num,
        .add {
          float: left;
          text-align: center;
          color: #888888;
          height: @p56;
          line-height: @p56;
          border: 1px solid #d7d7d7;
        }
        .num {
          width: @p75;
        }
        .cut {
          border-right: none;
          border-top-left-radius: 3px;
          border-bottom-left-radius: 3px;
        }
        .add {
          border-left: none;
          border-top-right-radius: 3px;
          border-bottom-right-radius: 3px;
        }
        .cut,
        .add {
          width: @p80;
          background-color: #f9f9f9;
        }
      }
    }
  }
  .btn {
    width: 100%;
    height: @p100;
    text-align: center;
    line-height: @p100;
    color: #ffffff;
    background: linear-gradient(to right, #1cb5fc, #1c83fc);
  }
}

.share_box {
  position: fixed;
  width: 100%;
  padding-left: @p30;
  padding-right: @p30;
  bottom: 0;
  left: 0;
  z-index: 1000;
  height: @p200;
  background-color: #ffffff;
  .share_box_item {
    width: 25%;
    float: left;
    text-align: center;
    padding-top: @p40;
    img {
      width: 50%;
    }
    div {
      font-size: @p24;
    }
  }
}

.slide-fade-enter-active {
  transition: all 0.1s linear;
}

.slide-fade-leave-active {
  transition: all 0.1s linear;
}

.slide-fade-enter,
	.slide-fade-leave-to
	/* .slide-fade-leave-active for below version 2.1.8 */

	 {
  transform: translateY(30px);
  opacity: 0.7;
}

// 分享
.cout_box {
  width: @p100;
  height: @p28;
  border: 1px solid #d3d3d3;
  border-radius: 3px;
  font-size: @p22;
  line-height: @p28;
  position: absolute;
  right: 0;
  color: #888888;
  bottom: @p10;
  span {
    float: left;
    width: 33.3%;
    text-align: center;
  }
}

.cout_box span:nth-child(2) {
  border-left: 1px solid #d3d3d3;
  border-right: 1px solid #d3d3d3;
}

.discount_box {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 999999;
  background-color: #fff;
  padding-bottom: @p30;
  .title {
    text-align: center;
    font-size: @p30;
    padding-top: @p30;
    padding-bottom: @p30;
  }
  .discount_list {
    .discount_item {
      position: relative;
      width: 100%;
      height: @p208; // background-image: url(../../images/ptsp/discount2.png);
      background-size: 100% 100%;
      .price {
        position: absolute;
        top: @p56;
        left: @p114;
        color: #1c83fc;
        .price_tag {
          font-size: @p28;
        }
        .price_num {
          font-size: @p60;
        }
      }
      .price_text {
        position: absolute;
        top: @p122;
        left: @p114;
        color: #1c83fc;
        font-size: @p30;
      }
      .des_text {
        position: absolute;
        top: @p65;
        left: @p305;
        font-size: @p24;
      }
      .des_date {
        position: absolute;
        top: @p122;
        left: @p305;
        font-size: @p20;
        color: #989898;
      }
    }
    .geted {
      // background-image: url(../../images/ptsp/discount1.png);
    }
  }
}
</style>
